<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-11-12 09:25:26
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-12-05 23:19:19
 * @FilePath: /nhw/src/views/Work/EmergencyManagement/EmergencyPlanDetails.vue
-->
<template>
  <Layout class="emergency-plan-details-container" title="应急预案详情" border>
    <section>
      <h4>预案基本信息</h4>
      <CellGroup>
        <Cell title="预案编号" :value="$route.params.data.edsId" />
        <Cell title="预案名称" :value="$route.params.data.edsName" />
        <Cell title="预案类型" :value="$route.params.data.ownComType" />
        <Cell title="预案级别" :value="$route.params.data.eetLevel" />
        <Cell title="组织部门" :value="$route.params.data.departName" />
        <Cell title="签发人" :value="yuAnDetail.signUserName" />
        <Cell title="签发时间" :value="yuAnDetail.signTime" />
      </CellGroup>
    </section>
    <Tabs v-model="active" type="card" color="#e0680f">
      <Tab title="事故风险分析">
        <CellGroup>
          <Cell title="事件类型" :value="yuAnDetail.eetName" />
          <Cell title="可能的区域或地点" :value="yuAnDetail.area" />
          <Cell title="发生事故的时间" :value="yuAnDetail.accidentTime" />
          <Cell title="影响范围" :value="yuAnDetail.boundary" />
          <Cell title="可能衍生、次生的事故" :value="yuAnDetail.othersOccur" />
          <Cell title="征兆与措施" :value="yuAnDetail.omenOccur" />
          <Cell title="可能联动范围" :value="yuAnDetail.linkageOccur" />
        </CellGroup>
      </Tab>
      <Tab title="应急工作职责">
        <CardTwig adorn left="发现者" colon />
        <p>
          {{ yuAnDetail.finder }}
        </p>
        <CardTwig adorn left="管理人员" colon />
        <p>
          {{ yuAnDetail.manager }}
        </p>
        <CardTwig adorn left="应急救援指挥者" colon />
        <p>
          {{ yuAnDetail.monitor }}
        </p>
      </Tab>
      <Tab title="注意事项">
        <CardTwig adorn left="注意事项" colon />
        <ol>
          <li>
            {{ yuAnDetail.detail }}
          </li>
          <!-- <li>
            电器火灾：立即切断火场电源；利用干粉、二氧化碳灭火器进行扑救，不能用水扑救；在救火当中应使人体与线
          </li> -->
        </ol>
      </Tab>
      <Tab title="应急处理">
        <Steps
          direction="vertical"
          :active="disposeSteps.length"
          active-color="#e0680f"
        >
          <Step v-for="(item, index) in disposeSteps" :key="index">
            <h3>Step{{ index + 1 }} {{ item.executor }}:{{ item.edssName }}</h3>
            <p>
              {{ item.content }}
            </p>
          </Step>
        </Steps>
      </Tab>
      <Tab title="应急物资">
        <Card v-for="item in materialList" :key="item.eegId">
          <CardTwig left="物资编号" :right="item.eegId" />
          <CardTwig left="物资名称" :right="item.eegName" />
          <CardTwig left="获取地址" :right="item.addr" />
          <CardTwig left="数量" :right="item.num" />
          <CardTwig left="部门" :right="item.num" />
        </Card>
      </Tab>
      <Tab title="通讯联系">
        <Card v-for="item in contact" :key="item.mobile">
          <CardTwig left="联络人" :right="item.contactor" />
          <CardTwig left="职能" :right="item.duty" />
          <CardTwig left="联系方式" :right="item.mobile" />
        </Card>
      </Tab>
    </Tabs>
  </Layout>
</template>

<script>
import Layout from "components/Layout";
import CardTwig from "components/Card/CardTwig";
import Card from "components/Card";
import { CellGroup, Cell, Tab, Tabs, Step, Steps } from "vant";
import { getDrillYuAnDetail, getDrillOtherSubXXXList } from "@/api/work";
export default {
  name: "EmergencyPlanDetails",
  components: {
    Layout,
    CardTwig,
    Card,
    CellGroup,
    Cell,
    Tab,
    Tabs,
    Step,
    Steps,
  },
  data() {
    return {
      orgNo: "",
      active: 0,
      yuAnDetail: {},
      disposeSteps: [],
      materialList: [],
      contact: [],
    };
  },
  created() {
    this.orgNo = window.localStorage.getItem("orgNo");
    this.getDrillYuAnDetail().then((res) => {
      this.yuAnDetail = res;
    });
    //应急处理
    this.getDrillOtherSubXXXList(1).then((res) => {
      console.log(res);
      this.disposeSteps = res;
    });
    //应急物资
    this.getDrillOtherSubXXXList(2).then((res) => {
      console.log(res);
      this.materialList = res;
    });
    //通讯联系
    this.getDrillOtherSubXXXList(3).then((res) => {
      console.log(res);
      this.contact = res;
    });
  },
  mounted() {},

  methods: {
    async getDrillYuAnDetail() {
      const res = await getDrillYuAnDetail({
        orgNo: this.orgNo,
        edsNo: this.$route.params.data.edsNo,
      });
      return res.param.data;
    },
    async getDrillOtherSubXXXList(type) {
      const res = await getDrillOtherSubXXXList({
        orgNo: this.orgNo,
        edsNo: this.$route.params.data.edsNo,
        type,
      });
      return res.param.data;
    },
  },
};
</script>

<style lang="less" scoped>
.emergency-plan-details-container {
  section {
    margin-bottom: 20px;
    h4 {
      text-indent: 1em;
      padding-top: 20px;
    }
  }

  .van-tabs {
    p {
      text-indent: 2em;
      font-size: 32px;
      margin-bottom: 20px;
      margin-top: 10px;
    }
    ol {
      font-size: 32px;
      padding-left: 40px;
    }
    li {
      list-style-type: decimal;
      margin-bottom: 20px;
    }
  }
}
/deep/ .van-tabs__nav--card {
  margin: 0;
}
</style>